<template>
  <div class="dialog-content dialog1">
    <div class="title">{{$t('subaccount.set_wallet')}}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="address">
        <el-input v-model="ruleForm.address" :placeholder="$t('subaccount.address1') + ' ' + data.coin_type.toUpperCase() + ' ' + $t('wallet.address.address')"></el-input>
      </el-form-item>
      <small class="info">{{$t('subaccount.wallet_info')}}</small>
      <div class="row" v-if="!isBingEmail && loginType === 'email'">
        <el-form-item prop="email">
          <el-input readonly v-model="ruleForm.email" :placeholder="$t('subaccount.no_binding_email')"></el-input>
        </el-form-item>
        <el-button class="code-btn" type="primary" size="mini" round @click="$router.push('/setup')">{{$t('subaccount.click_set')}}</el-button>
      </div>
      <div class="row" v-else>
        <el-form-item prop="code">
          <el-input v-model="ruleForm.code" :placeholder="$t('forget.email_code_info')"></el-input>
        </el-form-item>
        <el-button class="code-btn" type="primary" size="mini" round @click="getcode" :disabled="!code.v_code_btn">{{code.codeStr}}</el-button>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" round @click="submit">{{$t('subaccount.btn_sure')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { updateSubaccountAddress, getcode, sendTelCode } from '@/api';
import { mapGetters, mapMutations } from 'vuex';

export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    const validateEmail = (rule, value, callback) => {
      if (!this.isBingEmail) {
        callback(new Error(this.$t('subaccount.bind_email')));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        address: '',
        code: '',
        email: '',
      },
      rules: {
        address: [
          { required: true, message: this.$t('subaccount.input_wallet_address'), trigger: 'change' },
        ],
        email: [
          { validator: validateEmail, trigger: 'blur' },
        ],
        code: [
          { required: true, message: this.$t('forget.email_code_info'), trigger: 'change' },
        ],
      },
      code: {
        v_code_btn: true,
        codeStr: this.$t('btn.sendcode.getcode'),
        time: 60,
        timer: null,
      },
    };
  },
  computed: {
    ...mapGetters(['isBingEmail', 'email', 'subId', 'loginType', 'tel']),
  },
  beforeDestroy() {
    window.clearInterval(this.code.timer);
  },
  methods: {
    ...mapMutations(['SET_SUB_ADDRESS']),
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          updateSubaccountAddress({
            cuid: this.data.puid,
            coin_type: this.data.coin_type,
            config_id: this.data.config_id,
            address: this.ruleForm.address.trim(),
            code: this.ruleForm.code,
          }).then((res) => {
            if (res.data.status === 1) {
              if (this.data.config_id === this.subId) {
                this.SET_SUB_ADDRESS(this.ruleForm.address.trim());
              }
              this.$emit('toggleDialog', { showDialog: false, refresh: true });
              this.$notify({
                message: this.$t('api.6031'),
                type: 'success',
                duration: 2000,
                showClose: false,
              });
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
            }
          }).catch(() => {
            this.$message.error(this.$t('error.catchError'));
          });
        }
      });
    },
    getcode() {
      this.code.v_code_btn = false;
      this.code.codeStr = `${this.$t('btn.sendcode.resend')}(60s)`;
      clearInterval(this.code.timer);
      this.code.timer = setInterval(() => {
        if (this.code.time > 0) {
          this.code.time -= 1;
          this.code.codeStr = `${this.$t('btn.sendcode.resend')}(${this.code.time}s)`;
        } else {
          clearInterval(this.code.timer);
          this.code.time = 60;
          this.code.codeStr = this.$t('btn.sendcode.sendcode');
          this.code.v_code_btn = true;
        }
      }, 1000);
      if (this.loginType === 'email') {
        getcode({
          email: this.email,
          type: 'set_wallet',
        }).then((res) => {
          if (res.data.status === 1) {
            this.$notify({
              message: this.$t('set.send_email_code'),
              type: 'success',
              duration: 2000,
              showClose: false,
            });
          } else {
            this.$message({
              message: this.$t(`api.${res.data.errcode}`),
              type: 'warning',
            });
          }
        }).catch(() => {
          this.$message.error(this.$t('error.catchError'));
        });
      } else {
        sendTelCode({
          tel: this.tel,
          type: 'set_wallet',
        }).then((res) => {
          if (res.data.status === '1') {
            this.$notify({
              message: this.$t('set.send_phone_code'),
              type: 'success',
              duration: 2000,
              showClose: false,
            });
          } else {
            this.$message({
              message: this.$t(`api.${res.data.errcode}`),
              type: 'warning',
            });
          }
        }).catch(() => {
          this.$message.error(this.$t('error.catchError'));
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-content{
  .row{
    position: relative;
    .code-btn{
      padding: 0 7px;
      position: absolute;
      right: 5px;
      bottom: 20px;
      /deep/ span {
        line-height: 18px;
      }
    }
  }
  .dialog-footer{
    padding-top: 30px;
  }
}
</style>
